<template>
  <el-dropdown>
    <img :src="avatar" size-40px rounded-sm cursor-pointer outline-none />
    <template #dropdown>
      <el-dropdown-menu>
        <router-link to="/">
          <el-dropdown-item>首页</el-dropdown-item>
        </router-link>
        <router-link to="/profile/index">
          <el-dropdown-item>个人设置</el-dropdown-item>
        </router-link>
        <el-dropdown-item divided @click="logout">
          <span block @click="logout">退出登录</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script lang="ts" setup>
import avatar from "@/assets/vue.svg"
// 登出 1. 导入 useUserStore
import { useUserStore } from "@/stores/user"
// 登出 2. 使用 useUserStore
const store = useUserStore()
const { proxy } = getCurrentInstance()!
const logout = () => {
  // 登出 3. 使用 useUserStore 登出
  store.logout()
  // 登出 4. 消息提示
  proxy?.$message.success("退出成功")
  // 登出 5. 刷新页面，页面会重新加载，会走 vue3.5-learn\src\permission.ts 的route.before 进入登录页
  window.location.reload()
}
</script>
